import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Notification from '../../ch/components/MetaInfo.vue'

<Meta
  title="Components/MetaInfo"
  component={MetaInfo}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MetaInfo },
  template: '<MetaInfo :metainfos="metainfos"  />'
})


# MetaInfo
<Canvas>
  <Story
    name="Example"
    args={{
      metainfos: ["This is a meta info", "This is another meta info"]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Interaction and accessibility

Metainfos are used to provide additional information about the content of the element.

```html
<button href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"

</button>
```

<a href="?path=/story/components-MetaInfo--example">
  Go to the Canvas Tab
</a>

---

<a href="?id=components-MetaInfo--example" target="_blank">
  Open page in full width in a new tab
</a>
